<template>
    <div>
        <el-container>
            <el-header class="inside-header">
                <div>
                    <!-- 面包屑 -->
                    <el-breadcrumb separator=">">
                        <el-breadcrumb-item>企业环保</el-breadcrumb-item>
                        <el-breadcrumb-item>人员管理</el-breadcrumb-item>
                        <el-breadcrumb-item class="breadcrumbColor">供应商人员管理</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
            </el-header>
            <el-main>
                <div class="inside-main-box">
                    <el-row class="inside-main" style="background: #fff;padding-top: 10px;height: 46px;">
                        <el-col :span="4" style="margin-left: 20px;">
                            <el-form-item label="人员姓名" size="small">
                                <el-input v-model="form.name" placeholder="请输入人员姓名或电话" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="4" style="margin-left: 5px;">
                            <el-form-item label="人员类型" size="small">
                              <el-input v-model="form.personnel_type" placeholder="请输入人员类型" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="4" style="margin-left: 5px;">
                            <el-form-item label="供应商" size="small">
                              <el-input v-model="form.supplier" placeholder="请输入所属供应商" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" style="margin-left: 20px;">
                            <el-button size="small" class="sele-but" icon="search" @click="selectQuery">查询</el-button>
                            <el-button size="small" class="empty-but" icon="refresh" @click="clear">重置</el-button>
                            <el-button size="small" icon="plus" class="add-but" @click="addDialog = true">新增</el-button>

                        </el-col>
                    </el-row>
                </div>
                <div style="background: #fff;">
                    <el-table :data="tableData" style="width: 100vw;">
                        <el-table-column align="center" prop="id" label="序号" width="80" />
                        <el-table-column align="center" prop="name" label="姓名" />
                        <el-table-column align="center" prop="supplier" label="所属供应商" />
                        <el-table-column align="center" prop="telephone" label="电话" />
                        <el-table-column align="center" prop="certificates" label="证件" />
                        <el-table-column align="center" prop="personnel_type" label="人员类型" />
                        <el-table-column align="center" prop="signing_date"
                                         :formatter="function(row,column){  return $moment(row.signing_date).format('YYYY-MM-DD')}" label="签属日期" />
                        <el-table-column align="center" prop="service_time"
                                         :formatter="function(row,column){  return $moment(row.service_time).format('YYYY-MM-DD')}" label="服务时间" />
                        <el-table-column align="center" prop="position" label="职位" />
                        <el-table-column align="center" prop="event_record" label="事项记录" />
                        <el-table-column align="center" prop="maintenance_log" label="维保日志" />
                        <el-table-column align="center" label="操作" width="120">
                            <template #default = 'scope'>
                                <el-button link type="primary" icon="edit" size="small" @click="updateDetail(scope.row)">修改</el-button>
                                <el-button link type="danger" icon="delete" size="small" @click="deleteRow(scope.row.id)">删除</el-button>
                            </template>
</el-table-column>
</el-table>
<el-pagination style="margin-top: 20%;display: flex;justify-content: flex-end;" v-model:current-page="currentPage3" v-model:page-size="pageSize3" :small="small" :disabled="disabled" :background="background" layout="prev, pager, next, jumper" :total="1000"
    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
</el-main>
</el-container>
            <!--新增弹出框-->
      <el-dialog v-model="addDialog" title="新增人员信息" width="40%">
    <div style="width: 80%">
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="ruleForm.name" style="width:300px" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="所属供应商" prop="supplier">
                <el-input v-model="ruleForm.supplier" style="width:300px" placeholder="请输入" />
            </el-form-item>
          <el-form-item label="电话" prop="telephone">
            <el-input v-model="ruleForm.telephone" style="width:300px" placeholder="请输入"  />
          </el-form-item>
          <el-form-item label="证件" prop="certificates">
            <el-input v-model="ruleForm.certificates" style="width:300px" placeholder="请输入"  />
          </el-form-item>
          <el-form-item label="人员类型" prop="personnel_type">
            <el-input v-model="ruleForm.personnel_type" style="width:300px" placeholder="请输入" />
          </el-form-item>
             <el-form-item label="职位" prop="position">
            <el-input v-model="ruleForm.position" style="width:300px" placeholder="请输入"  />
          </el-form-item>
          <el-form-item label="签属日期" prop="signing_date">
            <el-date-picker v-model="ruleForm.signing_date" style="width:300px" type="date" placeholder="请选择"/>
          </el-form-item>
          <el-form-item label="服务时间" prop="service_time">
             <el-date-picker v-model="ruleForm.service_time" style="width:300px" type="date" placeholder="请选择"/>
          </el-form-item>
            <el-form-item label="事项记录" prop="event_record">
            <el-input v-model="ruleForm.event_record" maxlength="300" placeholder="请输入" show-word-limit type="textarea" />
          </el-form-item>
             <el-form-item label="维保日志" prop="maintenance_log">
            <el-input v-model="ruleForm.maintenance_log" maxlength="300" placeholder="请输入" show-word-limit type="textarea" />
          </el-form-item>
        </el-form>
    </div>
    <template #footer>
        <span class="dialog-footer">
          <el-button class="sele-but" @click="insert"> 确定 </el-button>
          <el-button class="empty-but" @click="addDialog = false">取消</el-button>
        </span>
      </template>
</el-dialog>
      <!--修改弹出框-->
      <el-dialog v-model="updateDialog" title="修改人员信息" width="40%">
    <div style="width: 80%">
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="obj.name" style="width:300px" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="所属供应商" prop="supplier">
                <el-input v-model="obj.supplier" style="width:300px" placeholder="请输入" />
            </el-form-item>
          <el-form-item label="电话" prop="telephone">
            <el-input v-model="obj.telephone" style="width:300px" placeholder="请输入"  />
          </el-form-item>
          <el-form-item label="证件" prop="certificates">
            <el-input v-model="obj.certificates" style="width:300px" placeholder="请输入"  />
          </el-form-item>
          <el-form-item label="人员类型" prop="personnel_type">
            <el-input v-model="obj.personnel_type" style="width:300px" placeholder="请输入" />
          </el-form-item>
            <el-form-item label="职位" prop="position">
            <el-input v-model="obj.position" style="width:300px" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="签属日期" prop="signing_date">
             <el-date-picker v-model="obj.signing_date" style="width:300px" type="date" placeholder="请选择"/>
          </el-form-item>
          <el-form-item label="服务时间" prop="service_time">
             <el-date-picker v-model="obj.service_time" style="width:300px" type="date" placeholder="请选择"/>
          </el-form-item>
            <el-form-item label="事项记录" prop="event_record">
            <el-input v-model="obj.event_record" maxlength="300" placeholder="请输入" show-word-limit type="textarea" />
          </el-form-item>
             <el-form-item label="维保日志" prop="maintenance_log">
            <el-input v-model="obj.maintenance_log" maxlength="300" placeholder="请输入" show-word-limit type="textarea" />
          </el-form-item>
        </el-form>
    </div>
    <template #footer>
        <span class="dialog-footer">
          <el-button class="sele-but" @click="update(obj)"> 修改 </el-button>
          <el-button class="empty-but" @click="updateDialog = false">取消</el-button>
        </span>
      </template>
</el-dialog>
</div>
</template>

<script setup lang="ts">
import {selectAllSupplier,insertSupplier,updateSupplier,deleteSupplier} from "@/api/entPersonManage"
import {
  onMounted,
  reactive,
  ref
} from 'vue'
    import {
        Plus
    } from "@element-plus/icons-vue";
    // 路由
    import {
        useRouter
    } from 'vue-router'
import {ElMessage,ElMessageBox} from "element-plus";
onMounted(() => {
  selectAll();
});
    const router = useRouter()
    const tableData = ref([])
    const form = reactive({
      name: "",
      telephone:"",
      personnel_type:"",
      supplier:""
      });
    //查询全部
    const selectAll = () => {
      selectAllSupplier({}).then((res)=>{
        tableData.value = res.data
      })
    }
//    根据条件查询
const selectQuery = () => {
  selectAllSupplier(form).then((res)=>{
    tableData.value = res.data
  })
}
//重置
const clear = () => {
  form.name = ""
  form.telephone=""
  form.personnel_type=""
  form.supplier=""
  selectAll()
}
//新增
const ruleForm = reactive({
  name:"",
  supplier:"",
  telephone:"",
  certificates:"",
  personnel_type:"",
  signing_date:"",
  service_time:"",
  position:"",
  event_record:"",
  maintenance_log:""
});
const  addDialog = ref(false)
const insert = () => {
  insertSupplier(ruleForm).then((res)=>{
    if(res.code == 200){
      ElMessage.success('新增成功');
      selectAll()
      addDialog.value =false
    } else {
      ElMessage.error('新增失败');
    }
  })
}
//修改
const  updateDialog = ref(false)
let obj = reactive({
  id:"",
  name:"",
  supplier:"",
  telephone:"",
  certificates:"",
  personnel_type:"",
  signing_date:"",
  service_time:"",
  position:"",
  event_record:"",
  maintenance_log:""
})
const updateDetail = (row) => {
  updateDialog.value = true
  obj.id = row.id
  obj.name = row.name
  obj.supplier = row.supplier
  obj.telephone = row.telephone
  obj.certificates = row.certificates
  obj.personnel_type = row.personnel_type
  obj.signing_date = row.signing_date
  obj.service_time = row.service_time
  obj.position = row.position
  obj.event_record = row.event_record
  obj.maintenance_log = row.maintenance_log
}
const update = (row) => {
  updateSupplier(row).then((res)=>{
    if(res.code == 200){
      ElMessage.success('修改成功');
      selectAll()
      updateDialog.value = false
    } else {
      ElMessage.error('修改失败');
    }
  })
}
//删除
const deleteRow = (index) => {
  ElMessageBox.confirm("确定要删除吗?").then(()=>{
    deleteSupplier({id:index}).then((res)=>{
      selectAll()
    })
  })
}
</script>
<style scoped>
    /* 面包屑字体颜色更改 */

    .breadcrumbColor>>>.el-breadcrumb__inner {
        color: #000;
    }
    /* 内部header */

    .inside-header {
        height: 10px;
        display: flex;
        justify-content: left;
        align-items: center;
    }
    /* 空心按钮样式 */

    .empty-but {
        border: 1px solid #3780b9;
        color: #3780b9;
    }
    /* 实心按钮背景样式 */

    .sele-but {
        background: #3780b9;
        border: 0px;
        border-radius: 2px;
        color: white;
    }

    .add-but {
        background: #dde5fe;
        color: #3780b9;
    }
    /* 分页 */

    .demo-pagination-block {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
</style>
